<template>
    <div class="heatmap-container">
        <!-- 标题组件 -->
        <Title :title="title"></Title>
        <!-- 热力图容器 -->
        <div ref="heatmapContainer" class="heatmap-content"></div>
    </div>
</template>

<script>
import { Heatmap } from '@antv/g2plot';
// 引入Title组件（确保路径正确）
import Title from './Title.vue';

export default {
    // 注册Title组件
    components: { Title },
    data() {
        return {
            title: '检测视频',
            heatmapPlot: null, // 存储图表实例
            // 模拟热力图数据
            heatmapData: []
        };
    },
    methods: {
        // 初始化热力图
        initHeatmap() {//视图更新
            // 确保容器存在
            const container = this.$refs.heatmapContainer;
            if (!container) {
                console.error('热力图容器不存在');
                return;
            }

            // 销毁已有实例
            if (this.heatmapPlot) {
                this.heatmapPlot.destroy();
            }

            // 创建热力图
            this.heatmapPlot = new Heatmap(container, {
                data: this.heatmapData,
                type: 'density',
                xField: 'g',
                yField: 'l',
                colorField: 'tmp',
                color: '#F51D27-#FA541C-#FF8C12-#FFC838-#FAFFA8-#80FF73-#12CCCC-#1890FF-#6E32C2',
                legend: {
                    position: 'bottom',
                    label: {
                        style: {
                            fill: '#fff' // 确保在深色背景下可见
                        }
                    }
                },
                annotations: [
                    {
                        type: 'image',
                        start: ['min', 'max'],
                        end: ['max', 'min'],
                        src: 'https://gw.alipayobjects.com/zos/rmsportal/NeUTMwKtPcPxIFNTWZOZ.png',
                    },
                ],
                // 禁用自动适配，防止无限放大
                autoFit: false
            });

            // 设置固定尺寸
            const { clientWidth, clientHeight } = container;
            this.heatmapPlot.changeSize(clientWidth, clientHeight);
            this.heatmapPlot.render();
        },

        // 获取热力图数据
        async fetchHeatmapData() {
            try {
                // 实际项目中替换为你的API地址
                // const response = await fetch('你的数据接口地址');
                // this.heatmapData = await response.json();
                
                // 模拟数据 - 实际使用时替换为上面的接口请求
                this.heatmapData = Array.from({ length: 100 }, () => ({
                    g: Math.floor(Math.random() * 100),
                    l: Math.floor(Math.random() * 100),
                    tmp: Math.floor(Math.random() * 100)
                }));
                
                // 数据加载完成后初始化图表
                this.initHeatmap();
            } catch (error) {
                console.error('获取热力图数据失败:', error);
                // 加载失败时使用备用数据
                this.heatmapData = this.getBackupData();
                this.initHeatmap();
            }
        },

        // 备用数据
        getBackupData() {
            return [
                { g: 10, l: 20, tmp: 30 },
                { g: 20, l: 30, tmp: 50 },
                { g: 30, l: 40, tmp: 70 },
                { g: 40, l: 50, tmp: 60 },
                { g: 50, l: 60, tmp: 40 },
                { g: 60, l: 70, tmp: 80 },
                { g: 70, l: 80, tmp: 20 },
                { g: 80, l: 90, tmp: 90 },
            ];
        },

        // 处理窗口大小变化
        handleResize() {
            if (this.heatmapPlot && this.$refs.heatmapContainer) {
                const { clientWidth, clientHeight } = this.$refs.heatmapContainer;
                if (clientWidth > 0 && clientHeight > 0) {
                    this.heatmapPlot.changeSize(clientWidth, clientHeight);
                }
            }
        }
    },
    mounted() {
        // 确保DOM加载完成
        this.$nextTick(() => {
            this.fetchHeatmapData();
        });

        // 监听窗口大小变化
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        // 清理资源
        window.removeEventListener('resize', this.handleResize);
        if (this.heatmapPlot) {
            this.heatmapPlot.destroy();
        }
    }
};
</script>

<style lang="less" scoped>
.heatmap-container {
    width: 100%;
    height: 320px; /* 固定总高度，防止无限放大 */
    padding: 10px;
    box-sizing: border-box;
    background: #0F172A; /* 深色背景 */
    overflow: hidden; /* 防止内容溢出 */
}

.heatmap-content {
    width: 100%;
    height: 260px; /* 固定图表高度 */
    overflow: hidden;
}
</style>
    